<ui:composition 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
    <h:body onload="#{nuevaPropControl.cargaListas()}">
        <f:view>
            <f:loadBundle basename="bundle.messages" var="msg"/>
            <h1><h:outputLabel>#{msg.introproposal}</h:outputLabel></h1>
            <h:form id="newproposal">
                <p:panel id="panel">
                    <!-- Destinos -->
                    <p:panel id="panel_destinos">
                        <p><h:outputLabel for="destinos" value="#{msg.introdestiny}"/></p> 
                        <p><table>
                            <tr>
                                <td valign="top">
                                    <!-- Lista paises -->
                                    <p:selectOneMenu id="listadestinos" value="#{nuevaPropControl.paisToAdd}" filter="true" 
                                                filterMatchMode="startsWith" label="#{msg.destino}" >                                                                
                                        <f:selectItem itemLabel="#{msg.selectone}" itemValue="-1" noSelectionOption="true"/>
                                        <f:selectItems value="#{nuevaPropControl.paisSelect}"/>
                                    </p:selectOneMenu>  
                                </td><td valign="top">
                                    <!-- Boton añadir -->
                                    <p:commandButton action="#{nuevaPropControl.addDestino()}" value="#{msg.add}" ajax="true" 
                                                     update="destinos">
                                        <f:param name="validar" value="false"/>
                                    </p:commandButton>
                                </td><td>
                                    <!-- Paises añadidos -->
                                    <p:selectOneListbox id="destinos" value="#{nuevaPropControl.destSelect}" 
                                                        validator="listaPaisesValidator">
                                        <f:attribute name="destinosList" value="#{nuevaPropControl.destinos}"/> 
                                        <f:selectItems value="#{nuevaPropControl.destinos}" />                       
                                    </p:selectOneListbox>
                                </td><td valign="top">
                                    <!-- Botón quitar -->
                                    <p:commandButton action="#{nuevaPropControl.deletePais()}"  value="#{msg.delete}" ajax="true" update="destinos" >
                                        <f:param name="validar" value="false"/>
                                    </p:commandButton>
                                </td>  
                            </tr>
                            <tr >
                                <td colspan="4"><p:message for="destinos" id="destinosError"/></td>
                            </tr>
                         </table>  
                         </p>
                    </p:panel>
                    
                    <!-- Fechas -->
                    <p:panel id="panel_fechas">
                        <p>
                            <h:outputLabel for="fechas" value="#{msg.introdates}"/><br/></p>
                        <p>
                        <table>
                            <tr>                                
                                <td valign="top">
                                    <!-- Desde -->
                                    <h:outputLabel for="fechas" value=" #{msg.from} "/>
                                    <p:calendar id="fecha_ini" navigator="true" value="#{nuevaPropControl.fechaIni}" label="#{msg.date_ini}" 
                                                pattern="dd/MM/yyyy" yearRange="c:c+2" size="10" binding="#{bfecha_ini}">
                                        <p:ajax event="dateSelect" listener="#{nuevaPropControl.listenFechaIniChange}" update="fecha_fin"/>
                                    </p:calendar>
                                </td><td valign="top">
                                    <!-- Hasta -->
                                    <h:outputLabel for="fechas" value=" #{msg.to} "/>
                                    <p:calendar id="fecha_fin" navigator="true" value="#{nuevaPropControl.fechaFin}" label="#{msg.date_fin}" 
                                            pattern="dd/MM/yyyy" yearRange="c:c+2" size="10"  validator="dateBiValidator">
                                        <f:attribute name="fecha_ini" value="#{bfecha_ini.value}"/>                                
                                    </p:calendar>                         
                                </td><td valign="top">
                                    <!-- Botón añadir -->
                                    <p:commandButton action="#{nuevaPropControl.addParFecha()}"
                                                     update="panel_fechas" value="#{msg.add}">
                                        <f:param name="validar" value="false"/>
                                    </p:commandButton>
                                </td><td valign="top">
                                    <!-- Lista fechas -->
                                    <p:selectOneListbox id="fechas" value="#{nuevaPropControl.fechasChosen}" style="width: 12em"
                                                         validator="listaFechasValidator">
                                        <f:attribute name="fechasList" value="#{nuevaPropControl.fechas}"/> 
                                        <f:selectItems value="#{nuevaPropControl.fechas}"/>
                                    </p:selectOneListbox>                                    
                                </td><td valign="top">
                                    <!-- Botón quitar -->
                                    <p:commandButton action="#{nuevaPropControl.deleteFecha()}"
                                                     update="panel_fechas" value="#{msg.delete}">                                                        
                                         <f:param name="validar" value="false"/>
                                    </p:commandButton>
                                </td>
                            </tr><tr>
                                <td colspan="5">
                                    <p:message for="fecha_ini"/>
                                    <p:message for="fecha_fin"/>
                                    <p:message for="fechas"/>
                                </td>
                            </tr>
                        </table>                        
                        </p>
                    </p:panel>
                    
                    <!-- Número de días y coste-->
                    <p:panel id="panel_ndias">
                        <p>
                            <table style="width: 100%">
                                <tr><td style="width: 50%">
                                    <!-- Número de días -->
                                    <h:outputLabel value="#{msg.ndias_between} "/>
                                    <p:inputText id="ndiasmin" value="#{nuevaPropControl.numDiasMin}" label="#{msg.ndiasmin}" 
                                                 binding="#{ndias}" size="2">
                                     <!--   <p:ajax listener="#{nuevaPropControl.listenNDiasMinChange()}"/>-->
                                        <p:ajax listener="#{nuevaPropControl.listenFechaIniChange()}"/>
                                    </p:inputText>
                                    <h:outputLabel value=" #{msg.y} "/>
                                    <p:inputText id="ndiasmax" value="#{nuevaPropControl.numDiasMax}" label="#{msg.ndiasmax}" 
                                                 size="2" validator="numDiasValidator">
                                        <f:attribute name="ndias" value="#{ndias.value}"/>
                                    </p:inputText>
                                </td><td>
                                    <!-- Coste -->
                                    <h:outputLabel value="#{msg.expectedcost} "/>
                                    <p:inputText id="costemin" value="#{nuevaPropControl.costeMin}" label="#{msg.expectedcost}"
                                                 binding="#{coste}" size="5">
                                        <p:ajax listener="#{nuevaPropControl.listenCostChange()}"/>
                                    </p:inputText>
                                    <h:outputLabel value=" #{msg.y} "/>
                                    <p:inputText id="costemax" value="#{nuevaPropControl.costeMax}" label="#{msg.y}" 
                                                  size="5" validator="costeValidator">
                                         <f:attribute name="coste" value="#{coste.value}"/>
                                     </p:inputText>
                                    <h:outputLabel value=" #{msg.euros} "/>
                                </td></tr>
                                <tr><td><p:message for="ndiasmin"/><p:message for="ndiasmax"/></td>
                                    <td><p:message for="costemin"/><p:message for="costemax"/></td>
                                </tr>
                            </table>
                        </p>
                    </p:panel>   

                    <p:panel id="plan_eco_panel">                            
                        <table>
                            <tr><td colspan="2"><h:outputLabel value="#{msg.planeco}"/></td>
                                <td colspan="2"><h:outputLabel value="#{msg.plan_ocio}"/></td>
                            </tr>
                            <!-- Plan económico -->
                            <tr><td style="vertical-align:text-top;">
                                <p:selectOneListbox id="plan_eco" value="#{nuevaPropControl.planEco}" label="#{msg.planeco}" style="width: 12em">
                               <!--     <f:selectItem itemLabel=" # {msg.not_selected} " noSelectionOption="true"/>-->
                                    <f:selectItems value="#{nuevaPropControl.plEcoSelect}"/>
                                    <p:ajax update="panel_plan_eco" listener="#{nuevaPropControl.listenPlanChange}"/>                                                                
                                </p:selectOneListbox>
                           </td><td style="vertical-align:text-top;">
                                <p:panel id="panel_plan_eco"  style="width: 170px; border-width: 0px">
                                     <h:outputText value="#{nuevaPropControl.descriplan}" />
                                </p:panel>
                           </td>
                           <!-- Plan de ocio -->
                           <td>
                                <p:selectOneListbox id="plan_ocio" value="#{nuevaPropControl.planOcio}" label="#{msg.plan_ocio}" style="width: 16em">
                                    <f:selectItem itemLabel="-- #{msg.not_selected} --" noSelectionOption="true"/>
                                    <f:selectItems value="#{nuevaPropControl.plOcioSelect}"/>
                                    <p:ajax update="panel_plan_ocio" listener="#{nuevaPropControl.listenPlOcioChange}"/>                                                                
                                </p:selectOneListbox>
                           </td><td style="vertical-align:text-top;">
                                <p:panel id="panel_plan_ocio"  style="width: 170px; border-width: 0px">
                                    <h:outputText value="#{nuevaPropControl.descriplocio}" />
                                </p:panel>
                           </td></tr>
                        </table>                    
                    </p:panel>
                    <p:panel id="panel_description">
                        <p>
                            <table style="width: 100%">
                            <tr><td style="width: 50%">
                                <h:outputLabel value="#{msg.writedescription}"/><br/>
                                <p:inputTextarea rows="10" cols="50" counter="counter" maxlength="500"       
                                                    counterTemplate="{0} #{msg.charremain}." autoResize="false" 
                                                    value="#{nuevaPropControl.descripcion}" /><br/>
                                <h:outputText id="counter" />
                            </td><td style="width: 50%">
                                <p:selectOneRadio id="publico" value="#{nuevaPropControl.viajePublico}" layout="pageDirection">  
                                    <f:selectItem itemLabel="#{msg.public_travel}" itemValue="#{true}" />  
                                    <f:selectItem itemLabel="#{msg.private_travel}" itemValue="#{false}" />  
                                </p:selectOneRadio>
                            </td></tr></table>
                        </p>
                    </p:panel>
                    <div>
                        <!-- Guardar propuesta -->
                        <p:commandButton value="#{msg.save}" id="salvar" update="panel" 
                                         action="#{nuevaPropControl.saveProposal}" >
                             <f:param name="validar" value="new"/>
                        </p:commandButton>
                        <!-- Reset form -->
                        <p:commandButton value="#{msg.reset}" update="panel" process="@this" 
                                         action="#{nuevaPropControl.resetController()}">   
                             <p:resetInput target="panel"/>
                             <f:param name="validar" value="false"/>
                        </p:commandButton>                            
                    </div>
                </p:panel>            
                <!-- Dialog -->
                <p:dialog id="dlgSucces" header="#{msg.newproposal}" modal="true" resizable="false"
                            widgetVar="dlgSucces" closable="false" showEffect="explode" hideEffect="bounce">                   
                    <p:panelGrid styleClass="paneldata-noborder">
                        <p:row>
                            <p:column colspan="2">
                                <h:outputText value="#{msg.proposal_saved_succes}" />
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column style="text-align: center">                                
                                <p:commandButton value="#{msg.accept}" oncomplete="dlgSucces.hide()" id="boton1"
                                                 update=":main" action="#{menuControl.initial(e)}" />
                            </p:column>                            
                        </p:row>                        
                    </p:panelGrid>      
                </p:dialog>
                
                <p:dialog id="dlgError" header="#{msg.newproposal}" modal="true" resizable="false"
                            widgetVar="dlgError" closable="false" showEffect="explode" hideEffect="bounce">
                    <p:panelGrid styleClass="paneldata-noborder" id="dialogGrid">
                        <p:row>
                            <p:column colspan="2">
                                <h:outputText value="#{msg.proposal_saved_error}" />
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column style="text-align: center">
                                <p:commandButton value="#{msg.retry}" oncomplete="dlgError.hide();"/>
                            </p:column>                            
                        </p:row>
                        <p:row>
                            <p:column>
                                <p:inputTextarea rows="3" cols="30" autoResize="false" id="errortext" widgetVar="errortext"
                                                 value="#{nuevaPropControl.error}" readonly="true"/><br/>
                            </p:column>
                        </p:row>
                    </p:panelGrid>   
                </p:dialog>                
            </h:form>
        </f:view>
    </h:body>
</ui:composition>
    
